<template> 
    <div class="container-wrapper">
        <div class="ibox ">
            <div class="ibox-title">
                <h4>{{table_title}}</h4>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <el-table
                    :data="table_data.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                    border
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    :default-sort = "{prop: 'department_name', order: 'descending'}">
                    <el-table-column
                        prop="group_name"
                        label="事业群名称"
                        sortable
                        >
                    </el-table-column>
                    <el-table-column
                        prop="department_name"
                        label="部门名称"
                        sortable
                        >                       
                    </el-table-column>
                    <el-table-column
                        prop="p_projname"
                        label="项目名称"
                        sortable
                        >                       
                    </el-table-column>
                    <el-table-column align="center" label="配置管理">
                    <el-table-column
                        prop="p_ci_active"
                        label="持续集成"
                        sortable
                        >
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_ci_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                                                                
                    </el-table-column>
                    <el-table-column
                        prop="p_gerrit_active"
                        label="Gerrit"
                        sortable
                        >
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_gerrit_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                                                                
                    </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="项目管理系统">
                    <el-table-column
                        prop="p_bugzilla_active"
                        label="缺陷处理"
                        sortable>
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_bugzilla_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                       
                    </el-table-column>
                    <el-table-column
                        prop="p_require_imple_active"
                        label="项目需求"
                        sortable
                        >
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_require_imple_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                       
                    </el-table-column>
                    <el-table-column
                        prop="p_test_task_active"
                        label="项目测试"
                        sortable>
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_test_task_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                        
                    </el-table-column>
                    </el-table-column>
                    <el-table-column
                        prop="p_period_rev_active"
                        label="阶段点评审系统"
                        sortable
                        >
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_period_rev_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                        
                    </el-table-column>
                    
                    <el-table-column
                        prop="p_cus_complaint_active"
                        label="客户投诉系统"
                        sortable>
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_cus_complaint_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                        
                    </el-table-column>
                    
                    <el-table-column
                        prop="p_autotest_active"
                        label="自动化测试系统"
                        sortable>
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.p_autotest_active" type="success" icon="el-icon-check" circle></el-button>
                            <el-button v-else type="warning" icon="el-icon-close" circle></el-button>                          
                        </template>                        
                    </el-table-column>
                </el-table>
                <el-pagination
                    style="padding-top: 10px;"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="total, prev, pager, next, jumper"
                    :page-size="pageSize"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {   
    name: 'DataTable',
    props: {
        table_id: String,
        table_title: String,
        columns: Array,
        table_data: Array,
        columns_key: Array,
        columnDefs: [Object, Number,Array],
        pageLength: Number
        // sys_selector: Array,
        // group_selector: Array,
        // dept_selector: Array
    },
    data() {
        return {
            id: "table table-striped table-bordered table-hover " + this.table_id,
            currentPage: 1,
            total: 0,
            pageSize: 20
        }
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        tableRowClassName({row, rowIndex}) {
            if(rowIndex % 2 !== 0) {
                return 'warning-row'
            } else {
                return 'success-row'
            }
        },
        test: function() {
            console.log('Test12345');
        }
    },
    watch: {
        table_data: {
            handler() {
                this.total = this.table_data.length
            },
            immediate: true
        }
    },
    beforeUpdate: function() {
        // console.log('Component DataTable: before update')
    },
    updated: function() {
        // console.log('Component DataTable: update')
    },
    mounted: function() {
         
    }
  
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';

    .container-wrapper >>> .warning-row {
        background: rgba(0,0,0,.075);
    }
    .container-wrapper >>> .success-row {
        background: #fff;
    }  
    /* DATATABLES */
    table.dataTable thead .sorting,
    table.dataTable thead .sorting_asc:after,
    table.dataTable thead .sorting_desc,
    table.dataTable thead .sorting_asc_disabled,
    table.dataTable thead .sorting_desc_disabled {
        background: transparent;
    }
    .dataTables_wrapper {
        padding-bottom: 30px;
    }
    .dataTables_length {
        float: left;
    }
    .dataTables_filter label {
        margin-right: 5px;
    }
    .html5buttons {
        float: right;
    }
    .html5buttons a {
        border: 1px solid #e7eaec;
        background: #fff;
        color: #676a6c;
        box-shadow: none;
        padding: 6px 8px;
        font-size: 12px;
    }
    .html5buttons a:hover,
    .html5buttons a:focus:active {
        background-color: #eee;
        color: inherit;
        border-color: #d2d2d2;
    }
    div.dt-button-info {
        z-index: 100;
    }
    @media (max-width: 768px) {
        .html5buttons {
            float: none;
            margin-top: 10px;
        }
        .dataTables_length {
            float: none;
        }
    }
</style>
